<template>
    <div class="home-container">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide focus-bg focus-bg-1"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <div class="introduction-container">
            <my-title title="人力资源供应链服务"></my-title>

            <div class="introduction-body" :class="`introduction-bg-${key + 1}`" @click="toPage(item.route)" v-for="(item, key) in introductionData">
                <div class="middle-inner">
                    <div class="introduction-title">
                        <div class="introduction-icon" :class="`introduction-icon-${key + 1}`"></div>
                        {{item.title}}
                    </div>
                    <div class="introduction-content">{{item.content}}</div>
                </div>
            </div>
        </div>

        <div class="policy-container">
            <my-title title="专业的人力政策数据库"></my-title>

            <div class="policy-body" v-for="(item, key) in policyData">
                <div class="policy-icon" :class="`policy-icon-${key + 1}`"></div>
                <div class="policy-content">
                    <div class="middle-inner">
                        <div class="policy-title">{{item.title}}</div>
                        <div class="policy-detail">{{item.content}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="professor-container">
            <my-title title="专家团队"></my-title>

            <div class="professor-body" v-for="(item, key) in professorData">
                <div class="professor-icon-body">
                    <div class="professor-icon-mask"></div>
                    <div class="professor-icon" :class="`professor-icon-${key + 1}`"></div>
                </div>

                <div class="professor-content-body">
                    <div class="professor-name">{{item.name}}</div>
                    <div class="professor-title">{{item.title}}</div>
                    <div class="professor-content">{{item.content}}</div>
                </div>
            </div>
        </div>

        <div class="cooperation-container">
            <my-title title="合作伙伴"></my-title>

            <div class="cooperation-swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="arr in cooperationArr">
                        <div class="cooperation-body">
                            <div class="cooperation-icon" v-for="i in arr" :class="[`cooperation-icon-${i}`, {'cooperation-icon-margin': i % 2 == 1}]"></div>
                        </div>
                    </div>
                </div>

                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>

    </div>
</template>

<script>
    import myTitle from '../components/title'

    export default {
    	create() {
		    document.body.scrollTop = 0
        },
        data() {
        	return {
                introductionData: [{
                    title: '智能税务筹划生态体系',
                    content: '了解各地人力政策，以人力资源薪税保结构为切入点，结合法财税专家的上百种方案，拥有多地财政奖励的财税中心形成爱员工独具优势的税务筹划生态体系',
                    route: 'tax'
                },{
	                title: '全国社保交付平台',
	                content: '支持全国385个地级市社保公积金一键购买，推荐优质购保方案及优质服务商',
	                route: 'security'
                },{
	                title: '自由职业者保障平台',
	                content: '立足于个人的保障与发展，为自由职业者提供简单易用的保障产品，让个体也能获得应有的社会保障',
	                route: 'freelance'
                },{
	                title: '共享经济下的促进残疾人就业计划',
	                content: '了解社会对残疾人就业的政策趋势，可为残疾人定制最适合的岗位及培训，深度了解残疾人的状况与需求',
	                route: 'disabled'
                }],
                policyData: [{
        			title: '专业团队多年积累',
                    content: '解决政策信息不对称问题专业性高，难度大'
                },{
	                title: '数据化处理',
	                content: '可动态调整参数，随时更新政策的调整'
                },{
	                title: '集成落地服务',
	                content: '供应商服务支持，提供政策落地服务'
                }],
		        professorData: [{
        			name: '方晓',
                    title: '国家级人力成本与用工风控专家',
                    content: '国家人力成本政策专家团成员'
                },{
			        name: '汪锋',
			        title: '中国EHR领域资深顾问专家',
			        content: '互联网上市企业集团HR高管'
		        },{
			        name: '汪洋',
			        title: '中国劳动学会劳务经济与境内劳务派遣专业委员会 常务理事',
			        content: '广州人力资源服务协会 副会长'
		        }],
                cooperationArr: [
                	[1, 2, 3, 4],
	                [5, 6, 7, 8],
	                [9, 10, 11, 12]
                ]
            }
        },
        components: {
	        myTitle
        },
	    mounted() {
		    this.focusSwiper = new Swiper('.swiper-container', {
			    pagination: '.swiper-pagination',
			    paginationClickable: true,
			    effect: 'fade',
                speed: 800,
                autoplay: 5000,
                loop: true
		    })

		    this.cooperationSwiper = new Swiper('.cooperation-swiper-container', {
			    pagination: '.swiper-pagination',
			    paginationClickable: true
		    })

	    },
        methods: {
        	toPage(route) {
                this.$router.push(route)
		        document.body.scrollTop = 0
            },
            toActivity() {
        		window.location.href = 'http://www.seceos.com/h5.html'
            }
        }
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";

    .swiper-container {
        width: pxToRem(750);
        height: pxToRem(510);
    }

    .swiper-pagination-bullet {
        background: transparent;
        border: $white solid 1px;
        width: pxToRem(8);
        height: pxToRem(8);
    }

    .swiper-pagination-bullet-active {
        background: $white;
    }

    .focus-bg {
        background-size: 100% 100%;
        width: pxToRem(750);
        height: pxToRem(510);
    }

    @for $i from 1 through 2 {
        .focus-bg-#{$i} {
            background-image: url('../images/home/focus' + $i + '.png');
        }
    }

    .introduction-container {
        height: pxToRem(1600);
        background-color: $lighter-grey;
    }

    .introduction-body {
        margin: 0 auto pxToRem(15);
        width: pxToRem(682);
        height: pxToRem(329);
        background-size: 100% 100%;
        text-align: center;
        color: $white;
        display: table;
        border-radius: pxToRem(4);
        box-shadow: 1px 1px 5px $grey;

        .middle-inner {
            display: table-cell;
            vertical-align: middle;

            .introduction-title {
                font-size: pxToRem(32);
                margin-bottom: pxToRem(40);
                line-height: pxToRem(52);
                display: inline-block;

                .introduction-icon {
                    width: pxToRem(52);
                    height: pxToRem(52);
                    float: left;
                    background-size: 100% 100%;
                    margin-right: pxToRem(26);
                }

                @for $i from 1 through 4 {
                    .introduction-icon-#{$i} {
                        background-image: url('../images/home/introduction/introduction-icon-' + $i + '.png');
                    }
                }
            }

            .introduction-content {
                font-size: pxToRem(24);
                padding: 0 pxToRem(30);
            }
        }
    }

    @for $i from 1 through 4 {
        .introduction-bg-#{$i} {
            background-image: url('../images/home/introduction/introduction-bg-' + $i + '.png');
        }
    }

    .policy-container {
        height: pxToRem(840);
        background-color: $white;
    }

    .policy-body {
        height: pxToRem(168);
        width: pxToRem(600);
        margin: 0 auto pxToRem(50);

        .policy-icon {
            width: pxToRem(168);
            height: pxToRem(168);
            background-size: 100% 100%;
            float: left;
            margin-right: pxToRem(30);
        }

        @for $i from 1 through 3 {
            .policy-icon-#{$i} {
                background-image: url('../images/home/policy-icon-' + $i + '.png');
            }
        }

        .policy-content {
            width: pxToRem(400);
            height: pxToRem(168);
            text-align: left;
            display: table;

            .middle-inner {
                display: table-cell;
                vertical-align: middle;

                .policy-title {
                    color: $dark-grey;
                    font-size: pxToRem(32);
                    margin-bottom: pxToRem(20);
                    font-weight: bold;
                }

                .policy-detail {
                    color: $grey;
                    font-size: pxToRem(26);
                    font-style: italic;
                }
            }
        }
    }

    .professor-container {
        height: pxToRem(1100);
        background-color: $grey2;

        .my-title span {
            color: $white;
        }

        .professor-body {
            overflow: auto;
            zoom: 1;
            position: relative;

            .professor-icon-body {
                padding-left: pxToRem(75);
                float: left;

                .professor-icon-mask {
                    position: absolute;
                    background-image: url("../images/home/professor-shadow.png");
                    background-size: 100% 100%;
                    width: pxToRem(160);
                    height: pxToRem(208);
                    top: 50%;
                    margin-top: pxToRem(-60);
                    left: pxToRem(140);
                }

                .professor-icon {
                    width: pxToRem(168);
                    height: pxToRem(168);
                    background-size: 100% 100%;
                    position: absolute;
                    top: 50%;
                    margin-top: pxToRem(-84);
                }

                @for $i from 1 through 3 {
                    .professor-icon-#{$i} {
                        background-image: url('../images/home/professor-icon-' + $i + '.png');
                    }
                }
            }

            &:last-child .professor-content-body {
                border-bottom: none;
            }

            .professor-content-body {
                float: right;
                margin: 0 pxToRem(45) 0 pxToRem(50);
                font-size: pxToRem(28);
                width: pxToRem(400);
                border-bottom: $light-grey3 dashed pxToRem(2);
                padding: pxToRem(60) 0;

                .professor-name {
                    font-size: pxToRem(32);
                    color: $white;
                    margin-bottom: pxToRem(20);
                }

                .professor-title {
                    color: $light-grey;
                    margin-bottom: pxToRem(16);
                }

                .professor-content {
                    color: $light-grey2;
                }
            }
        }
    }

    .cooperation-container {
        height: pxToRem(620);
        background-color: $lighter-grey;

        .cooperation-swiper-container {
            width: pxToRem(750);
            height: pxToRem(445);
            position: relative;

            .swiper-pagination-bullets {
                bottom: 0;

                .swiper-pagination-bullet {
                    border: $light-grey solid 1px;
                }

                .swiper-pagination-bullet-active {
                    background: $grey;
                }
            }

            .cooperation-body {
                text-align: center;
                height: 100%;

                .cooperation-icon {
                    width: pxToRem(326);
                    height: pxToRem(184);
                    display: inline-block;
                    background-size: 100% 100%;
                    background-color: $white;
                    margin-bottom: pxToRem(14);
                }

                .cooperation-icon-margin {
                    margin-right: pxToRem(28);
                }

                @for $i from 1 through 12 {
                    .cooperation-icon-#{$i} {
                        background-image: url('../images/home/cooperation/' + $i + '.png');
                    }
                }
            }

        }
    }


</style>























